<script lang="ts" setup>
import { ref } from 'vue';
import { reactive } from 'vue';
// import { reactive } from 'vue';
// import { computed } from 'vue';
import { Ref } from 'vue';
import { onMounted, onUnmounted } from 'vue';
// import useSpeaking from './hooks/useSpeaking';

const props = defineProps<{
  isExpand: Ref<boolean>;
  onShowExpand: () => void;
  onUploadFn: () => void;
  //   onCameraFn: () => void;
  onSendLocationFn: () => void;
  //   onSendMessage: () => void;
  onChangeLineBreak: () => void;
}>();

// 自主扩展textarea高度
function autoExpand(event: any) {
  const textarea = event.target;
  if (textarea.tagName.toLowerCase() !== 'textarea') return;

  textarea.style.height = 'auto';
  textarea.style.height = textarea.scrollHeight + 'px';
}
onMounted(() => {
  window.addEventListener('input', autoExpand, false);
});
onUnmounted(() => {
  window.removeEventListener('input', autoExpand, false);
});

// 定义长按事件处理函数
// const { speakingDom, isText, changeTextFn } = useSpeaking();
const textarea = reactive({
  height: 20,
  message: '',
  alt: false
});
// const message = ref('');
const textareaDom = ref<HTMLTextAreaElement | null>(null);
//  换行
const onLineBreak = () => {
  //   if (textarea.alt) {
  textarea.message += '\n';
  textarea.height = textareaDom.value!.scrollHeight + 15;
  textareaDom.value!.scrollTop = textareaDom.value!.scrollHeight;
  props.onChangeLineBreak();
};
// 发送消息
const onSendMessage = (e: Event) => {
  e.preventDefault();
  console.log(textarea.alt);

  if (!textarea.alt) {
    // 判断是否为空
    // if (textarea.message.trim() === '') return;
    // 发送消息
    //   onSendMessage();  // webscoket 发送消息,父发送
    // 重置textarea
    textarea.message = '';
    textarea.height = 20;
  }
};
// const rows = computed(() => textarea.message.split('').filter((i) => i === '\n').length || 1);
</script>

<template>
  <div class="footer">
    <div class="top">
      <!-- 这里的语音黑市那文字暂时注释 -->
      <!-- <span class="iconfont icon-jianpan fs-16" v-show="isText" @click="changeTextFn"></span> -->
      <!-- <span class="iconfont icon-yuyin fs-16" v-show="!isText" @click="changeTextFn"></span> -->

      <!-- <textarea v-show="!isText" name="" id="" cols="20" rows="1" oninput="autoExpand(this)"></textarea> -->
      <textarea
        ref="textareaDom"
        v-model="textarea.message"
        :style="{ height: textarea.height + 'px' }"
        name=""
        id=""
        cols="20"
        rows="1"
        class="textarea"
        placeholder="按住 Alt 和 Enter 发送消息"
        @oninput="autoExpand"
        @keydown.alt="textarea.alt = true"
        @keyup.alt="textarea.alt = false"
        @keydown.enter="onSendMessage"
        @keyup.enter.alt="onLineBreak"
      ></textarea>
      <!-- <div class="holdonToSpeak" v-show="isText" ref="speakingDom">按住 说话</div> -->
      <div class="right">
        <!-- 表情包按钮 -->
        <!-- <span class="iconfont icon-btn_emjo fs-16"></span> -->
        <van-icon name="add-o" class="fs-16" @click="onShowExpand" />
      </div>
    </div>
    <div class="expand" v-if="isExpand.value">
      <!-- 上传图片 -->
      <div class="expand-item upload" @click="onUploadFn">
        <span class="iconfont icon-tupian"></span>
        <input type="file" accept="image/*" />
      </div>
      <!-- 拍照 -->
      <!-- <div class="expand-item" @click="onCameraFn">
        <span class="iconfont icon-paizhao"></span>
        <input type="file" accept="image/*" capture="environment" />
      </div> -->
      <!-- 定位 -->
      <!-- <div class="expand-item" @click="onSendLocationFn">
        <span class="iconfont icon-dingwei"></span>
      </div> -->
    </div>
  </div>
</template>

<style scoped lang="less">
.footer {
  align-self: flex-end;
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: #f1f1f1;
  //   transition: all 1s;
  .right {
    margin-bottom: 2px;
    align-self: flex-end;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .top {
    display: flex;
    align-items: center;
    padding: 4px 0;
    .fs-16 {
      padding: 0 4px;
    }
    textarea {
      flex: 1;
      overflow: hidden;
      margin-left: 4px;
    }
    .holdonToSpeak {
      flex: 1;
      background-color: #fff;
      text-align: center;
    }
  }
}

.expand {
  display: block;
  height: 100px;
  display: flex;
  align-items: center;
  margin-left: 10px;
  .expand-item {
    width: 64px;
    height: 64px;
    background: #fff;
    border-radius: 10px;
    margin-left: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    .icon-tupian {
      font-size: 24px;
    }
    .icon-paizhao {
      font-size: 36px;
    }
    .icon-dingwei {
      font-size: 32px;
    }
  }
  // 上传文件
  .upload {
    position: relative;
    input {
      position: absolute;
      width: 100%;
      height: 100%;
      opacity: 0;
    }
  }
}
</style>
